<template>
    <a-collapse v-model:activeKey="activeKey" @change="handleChange">
        <a-collapse-panel v-for="(log,index) in options" :key="index.toString()" header="zqa">

                <div style="margin:10px">
                    <a-steps :current="1">

                        <template #progressDot="{ index, status, prefixCls }">
                            <a-popover>
                                <template #content>
                                    <span>step {{ index }} status: {{ status }}</span>
                                </template>
                                <span :class="`${prefixCls}-icon-dot`"/>
                            </a-popover>
                        </template>
                        <a-step title="发起订单">
                            <template #description>
                                <div style="width: 150%;text-align: left">
                                    发起人ID： 12138<br/>
                                    用户名：赵肖云 <br/>
                                    时间：2020.02.02 20:21:11 <br/>
                                    发起类型：送餐到寝
                                </div>
                            </template>
                        </a-step>
                        <a-step title="商家确认订单">
                            <template #description>
                                <div style="width: 150%;text-align: left">
                                    商家ID： 12138<br/>
                                    商家名： 张应龙 <br/>
                                    时间：2020.02.02 20:21:11
                                </div>
                            </template>
                        </a-step>
                        <a-step title="呼叫取餐">
                            <template #description>
                            </template>
                        </a-step>

                        <a-step title="已取餐">
                            <template #description>
                            </template>
                        </a-step>

                        <a-step title="已确认">
                            <template #description>
                            </template>
                        </a-step>
                    </a-steps>
                </div>
            <template #extra>
                <div style="margin-top: -5px;width: 105%">
                    <a-button type="primary" block @click.stop="handleClick(index)">
                        <div>
                            <div style="margin-top: -3px;float: left">
                                <profile-outlined></profile-outlined>
                            </div>
                            <div style="float: left;margin-left: 3px">
                                订单内容
                            </div>

                        </div>
                    </a-button>
                    <a-modal
                            v-model:visible="log.visible"
                            title=" 1231231124141 号订单"
                            ok-text="确认"
                            cancel-text="取消"
                            @ok="log.visible=false"
                    >
                        <template #footer>
                            <a-button key="submit" type="primary" :loading="loading" @click="handleOk(index)">
                                关闭
                            </a-button>
                        </template>
                        <p>订单编号：1231231124141</p>
                        <p>订单类型：fewfwef</p>
                        <p>收货人：qwdqdqdq</p>
                        <p>包含商品：dqwdqwdq、dqwdqdwq</p>
                        <p>生成时间：qwdqdqdq</p>
                    </a-modal>
                </div>
            </template>
        </a-collapse-panel>
    </a-collapse>
</template>

<script>
    import {defineComponent, reactive, ref, watch} from "vue";


    export default defineComponent({
        props: {
            options: Array
        },
        setup(props) {
            const activeKey = ref(['1']);
            const options = ref(props.options);

            watch(props.options, (n) => {
                options.value = n;
            });

            const handleChange = () => {
                console.log(activeKey.value);
            };

            const handleClick=(index)=>{
                options.value[index].visible=true;
                console.log(111);
            };

            const handleOk=(index)=>{
                options.value[index].visible=false;
            }

            return {
                activeKey,
                options,
                handleChange,
                handleClick,
                handleOk
            }
        }
    });
</script>

<style scoped>

</style>
